<template>
  <div class="app-container">
    <LineCharts/>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane name="first" label="轨枕视图">
        <SleeperCanvas v-show="activeName=='first'" @changeTimeValue="changeTimeValue"/>
      </el-tab-pane>
      <el-tab-pane name="second" label="轨枕图片">
        <!--        <div class="picture-box">-->
        <!--          <image-preview v-show="activeName=='second'" :src="pictureR" width="50%" height="500px"></image-preview>-->
        <!--          <image-preview v-show="activeName=='second'" :src="pictureL" width="50%" height="500px"></image-preview>-->
        <!--        </div>-->
        <div class="picture-box" style="display: flex;flex-direction: row;">
          <div class="picture-index" v-for="item in pictureData" style="display: flex;flex-direction: column;width: 200px;height:400px;">
            <image-preview v-show="activeName=='second'" :src="item.right" width="200px" height="200px" rotationAngle="90"></image-preview>
            <image-preview v-show="activeName=='second'" :src="item.left" width="200px" height="200px" rotationAngle="90"></image-preview>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import LineCharts from "../../vector/picture/lineCharts.vue";
import SleeperCanvas from "../../vector/picture/sleeperCanvas.vue";

export default {
  components: {LineCharts,SleeperCanvas},
  data() {
    return {
      activeName: 'first',
      total:0,
      queryParams:{
        pageNum: 1,
        pageSize: 100,
        startMileage: undefined,
        endMileage: undefined
      },
      chartInstance: null,
      dataKey:['左高低(mm)','右高低(mm)','左轨向(mm)','右轨向(mm)','轨距(mm)','三角坑(mm)'],
      colorArray: ['#EF7E71','#F1BC38','#7284A4','#30CA87','#72A4FA','#71f0ed'],
      dynamicHeight: 0,
      yData: [],
      xData: [],
      pictureData:[
        {
          left: 'http://59.110.8.161:17024/data/L/L15.jpg',
          right: 'http://59.110.8.161:17024/data/R/R15.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L14.jpg',
          right: 'http://59.110.8.161:17024/data/R/R14.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L13.jpg',
          right: 'http://59.110.8.161:17024/data/R/R13.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L12.jpg',
          right: 'http://59.110.8.161:17024/data/R/R12.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L11.jpg',
          right: 'http://59.110.8.161:17024/data/R/R11.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L10.jpg',
          right: 'http://59.110.8.161:17024/data/R/R10.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L9.jpg',
          right: 'http://59.110.8.161:17024/data/R/R9.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L8.jpg',
          right: 'http://59.110.8.161:17024/data/R/R8.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L7.jpg',
          right: 'http://59.110.8.161:17024/data/R/R7.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L6.jpg',
          right: 'http://59.110.8.161:17024/data/R/R6.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L5.jpg',
          right: 'http://59.110.8.161:17024/data/R/R5.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L4.jpg',
          right: 'http://59.110.8.161:17024/data/R/R4.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L3.jpg',
          right: 'http://59.110.8.161:17024/data/R/R3.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L2.jpg',
          right: 'http://59.110.8.161:17024/data/R/R2.jpg'
        },
        {
          left: 'http://59.110.8.161:17024/data/L/L1.jpg',
          right: 'http://59.110.8.161:17024/data/R/R1.jpg'
        }
      ],
    };
  },
  mounted() {
    //this.initChart();
    //this.handleQuery()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getList(){
      this.xData = []
      this.yData = []
      this.total = 500
      for(let i = (this.queryParams.pageNum-1)*this.queryParams.pageSize; i<(this.queryParams.pageNum)*this.queryParams.pageSize; i++){
        this.xData.push(i)
        this.yData.push(Math.floor(Math.random()*8) - 4)
      }
      this.updateChart()
    },
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
    },

    changeTimeValue(val){
      let max = val + 7;
      this.pictureData = []
      for(var i = val+7;i>=val;i--){
        let data = {
          left: 'http://59.110.8.161:17024/data/L/L'+i+'.jpg',
          right: 'http://59.110.8.161:17024/data/R/R'+i+'.jpg'
        }
        this.pictureData.push(data)
      }

    },
    updateChart(){
      const grids = []
      const xAxis = []
      const yAxis = []
      const series = []
      const xData = this.xData
      const yData = this.yData
      const that = this
      this.dataKey.forEach(function (currentValue, index, array) {
        console.log(currentValue,index,array)
        //按照参数的个数添加grid，需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200
        let height = (index+1) * 60
        grids.push({
          show:true,
          left: 30,
          right:30,
          bottom: height,
          height: 60, // 折线图高度
          backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white'
        })

        // xAxis
        if(index==0){
          xAxis.push({
            gridIndex: 0, //x 轴所在的 grid 的索引
            type: 'category', //类目轴
            boundaryGap: false, //坐标轴两边留白策略，
            axisLine: {
              //是否显示坐标轴轴线。
              onZero: false,
              lineStyle: {
                color: 'black',
                width: 2,
              },
            },
            //车站标注
            axisLabel: {
              // interval: 0,//自适应X轴间距
              formatter: function (params) {
                // 自定义div
                // console.log(typeof(params))
                let res;
                if (params.includes('站')) {
                  res = '{abg11|' + params + '}';
                } else {
                  res = '{abg1|' + params + '}';
                }

                return res;
              },
              rich: {
                abg11: {
                  backgroundColor: '#2B8AFD',
                  width: '100%',
                  align: 'right',
                  height: 22,
                  borderRadius: 3,
                  padding: [2, 4, 2, 4],
                  color: '#ffffff',
                },
                abg1: {
                  color: '#595959',
                },
              },
            },
            data: xData,
            show: true, //是否显示 x 轴。
          })
        }else{
          xAxis.push({
            gridIndex: index, //x 轴所在的 grid 的索引
            type: 'category', //类目轴
            boundaryGap: false, //坐标轴两边留白策略，
            axisLine: {
              onZero: true, //X 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
              lineStyle: {
                color: '#979797',
              },
            },
            data: xData,
            show: true, //是否显示 x 轴。
            axisTick: {
              //坐标轴刻度相关设置
              show: false,
            },
            axisLabel: {
              //刻度标签
              show: false,
            },
          })
        }


        // yAxis
        // 修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）
        yAxis.push({
          gridIndex: index, //y 轴所在的 grid 的索引
          type: 'value',
          // name: "PM2.5",//纵坐标名字
          // nameLocation: "middle",//纵坐标名字的位置
          // nameGap: 30,//纵坐标名字与轴线之间的距离
          position: 'left', //y轴的位置
          inverse: false,
          splitLine: {
            //坐标轴在 grid 区域中的分割线
            show: false,
          },
          axisLine: {
            //坐标轴轴线相关设置  竖着那一根
            show: true,
            lineStyle: {
              color: '#979797',
            },
          },
          axisTick: {
            //坐标轴刻度相关设置
            show: false,
          },
          axisLabel: {
            //刻度标签
            show: false,
          },
        })

        // 7.最后修改series 每个参数是一个对象
        series.push({
          //参数的名字-数据注入
          name: currentValue,
          type: 'line',
          color: that.colorArray[index],
          // 设置不显示小圆圈
          symbol: 'none',
          showSymbol: false,
          xAxisIndex: index, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: index, //使用的 y 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          symbolSize: 8, //标记的大小
          //   hoverAnimation: false,
          smooth: true, //平滑曲线
          //每个grid的数据-数据注入
          data: yData,
          markLine: {
            symbol: 'none', //去掉箭头
            //最大值和最小值
            data: [
              {
                // type: 'median', //中位数。
                type: 'average', //中位数。
                symbol: 'none', //去掉开始的原点
                label: {
                  //字体设置
                  show: 'true',
                  position: 'insideEndTop',
                  distance: 5,
                  formatter: currentValue,
                  color: 'inherit',
                },
                lineStyle: {
                  //横线设置
                  width: 1,
                },
              },
            ],
          },
          lineStyle: {
            shadowColor: that.colorArray[index], //透明的颜色
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            opacity: 0.8, //透明度
            shadowBlur: 8, //阴影大小
            type: "solid", //实线
            width: 2,
          },
        })
      });
      const option = {
        grid: grids,
        xAxis: xAxis,
        yAxis: yAxis,
        series:series,
        dataZoom: [ // 添加 dataZoom 配置
          {
            type: 'inside', // 内置 dataZoom 组件
            xAxisIndex: 'all', // 控制所有 x 轴
            start: 0, // 缩放起始百分比
            end: 100 // 缩放结束百分比
          },
          {
            type: 'slider', // slider 类型的 dataZoom 组件，可选
            show: true, // 是否显示
            xAxisIndex: 'all', // 控制所有 x 轴
            start: 0, // 缩放起始百分比
            end: 100 // 缩放结束百分比
          }
        ],
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,
          confine: true,
          bordeRadius: 4,
          borderWidth: 1,
          borderColor: '#333',
          backgroundColor: 'rgba(255,255,255,0.9)',
          textStyle: {
            fontSize: 14,
            lineHeight: 32,
            color: 'black'
          },
          formatter: function(params, ticket, callback) {
            params.sort((a, b) => a['axisIndex'] > b['axisIndex'] ? 1 : -1)
            let res = "里程："+params[0].name+"km"
            for (let i = 0, l = params.length; i < l; i++) {
              res += `<br/><span style="color:${params[i].color};">` + params[i].seriesName + ' : ' + params[i].value + '</span>'
            }
            return res
          }
        },
        axisPointer: {
          type: 'shadow',
          link: {
            xAxisIndex: 'all'
          }
        },
      }
      this.chartInstance.setOption(option);
    },

    //获得动态高度
    getHeight(num){
      this.dynamicHeight = `${num * 100 + 150}px`;
    },
  },
};
</script>
